<!DOCTYPE html>
<!-- for循环的使用 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="utils/vue.js">

		</script>
	</head>
	<body>
		<div id="app">
			<!-- 以下两句话等价 -->
			<p>{{list}}</p>
			<p v-html="list"></p>
			<p>___________________</p>
			<p v-for="item in sites">
				{{item.name}}
			</p>
			<p>___________________</p>
			<!-- 提供第二个的参数为键名： -->
			<p v-for="(arg1,arg2) in object">
				{{arg2}}:{{arg1}}
			</p>
			<!-- 第三个参数为索引： -->
			<p v-for="(parm1, parm2, parm3) in object">
				<!-- {{index}}:{{value}}:{{key}} -->
				{{parm3}}:{{parm2}}:{{parm1}}
			</p>

		</div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					list: {
						key1: 'key1',
						key2: 'key2',
						key3: 'key3'
					},
					sites: [{
							name: 'Runoob'
						},
						{
							name: 'Google'
						},
						{
							name: 'Taobao'
						}
					],
					object: {
						name: '菜鸟教程',
						url: 'http://www.runoob.com',
						slogan: '学的不仅是技术，更是梦想！'
					}
				}

			})
		</script>
	</body>
</html>
